<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-05-22 14:32:05
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-09-15 15:09:45
 * @FilePath: \巡检管理系统\巡检轨迹详情
-->
<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { computed, onMounted, PropType, ref } from 'vue'
const lng = ref(0)
const lat = ref(0)
const marker = ref<any>(null)
const center = computed(() => {
  if (props.currentRow.lon && props.currentRow.lat) {
    return [props.currentRow.lon, props.currentRow.lat]
  } else {
    return [117.12012806, 36.64766208]
  }
})
function initMap() {
  AMapLoader.load({
    key: 'cdaa418d97b829c9ca7590fa62799ac5', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.MoveAnimation', 'AMap.MouseTool', 'AMap.Polygon', 'AMap.PolygonEditor'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    const map = new AMap.Map('container', {
      resizeEnable: true,
      //设置地图容器id
      viewMode: '2D', //是否为3D地图模式
      zoom: 12, //初始化地图级别
      center: center.value //初始化地图中心点位置
    })
    const placeMarker = (lnglat) => {
      console.log(lnglat)

      // 移除现有标记
      if (marker.value) {
        map.remove(marker.value)
      }
      // 创建新标记
      marker.value = new AMap.Marker({
        position: lnglat,
        icon: new AMap.Icon({
          image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          size: new AMap.Size(30, 40),
          imageSize: new AMap.Size(30, 40)
        }),
        offset: new AMap.Pixel(-15, -20),
        draggable: true,
        cursor: 'move'
      })

      // 添加标记到地图
      marker.value.setMap(map)
      // 更新坐标显示
      lng.value = lnglat.getLng().toFixed(6)
      lat.value = lnglat.getLat().toFixed(6)

      // 添加拖拽事件
      marker.value?.on('dragging', (e) => {
        lng.value = e.lnglat.getLng().toFixed(6)
        lat.value = e.lnglat.getLat().toFixed(6)
      })

      // 添加拖拽结束事件
      marker.value?.on('dragend', (e) => {
        console.log('标记位置已更新:', e.lnglat)
      })
    }
    if (props.currentRow.lon && props.currentRow.lat) {
      placeMarker(new AMap.LngLat(props.currentRow.lon, props.currentRow.lat))
    }
    map.on('click', function (e) {
      placeMarker(e.lnglat)
    })
  })
  // .catch((e:any) => {});
}
onMounted(async () => {
  initMap()
})

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null
  }
})
const submit = async () => {
  const formData = ref(props.currentRow)
  formData.value.lat = lat.value
  formData.value.lon = lng.value
  return formData.value
}
defineExpose({
  submit
})
</script>

<template>
  <div style="height: 100%; width: 100%; position: relative">
    <div id="container" style="height: 500px; width: 100%"></div>
    <p class="location">当前选中坐标为（{{ lng }},{{ lat }}）</p>
  </div>
</template>
<style scoped>
.location {
  width: 300px;
  height: 40px;
  background: white;
  position: absolute;
  top: 5px;
  padding: 0rem 0.75rem;
  left: 5px;
  border-radius: 0.4rem;
  line-height: 40px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
}
.home_div {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
}

:deep(.amap-copyright),
:deep(.amap-logo) {
  display: none !important;
}
.input-card .btn:last-child {
  margin-right: 0;
}
</style>
